<template>
    <rx-dialog @handOk="handleSubmit" @cancel="cancel">
        <rx-layout>
            <div class="InsPortal" slot="center">
                <a-form layout="vertical" :form="form">
                    <a-form-item style="display:none">
                        <a-input v-decorator="['portId']"/>
                    </a-form-item>
                    <a-form-item :label="i18n('form.portalTYpe','门户分类')">
                        <div class="InsPortal-isMobile">
                            <div v-for="item in isMobileList" @click="mdl.isMobile=item.value"
                                 :class="[mdl.isMobile == item.value?'InsPortal-isMobile-hover InsPortal-isMobile-name':'InsPortal-isMobile-name']">
                                <div v-if="mdl.isMobile == item.value" class="InsPortal-isMobile-icon">
                                    <my-icon class="InsPortal-icon-name" type="icon-right"></my-icon>
                                </div>
                                <my-icon class="InsPortal-icon" :type="item.icon"></my-icon>
                                {{ item.label }}
                            </div>
                        </div>
                        <div class="InsPortal-isDefault">
                            <div style="margin-right: 32px">
                                <span style="margin-right: 6px">{{i18n('form.defaultPortal','默认门户')}}</span>
                                <rx-checkbox :false-value="0"
                                             :true-value="1"
                                             v-model="mdl.isDefault"
                                >
                                </rx-checkbox>
                            </div>
                            <div v-if="mdl.isMobile == 'NO'">
                                <span style="margin-right: 6px">{{i18n('form.customConfig','个性化配置')}}</span>
                                <rx-checkbox
                                    :false-value="0" :true-value="1"
                                    v-model="mdl.isEdit"
                                    >
                                </rx-checkbox>
                            </div>
                        </div>
                    </a-form-item>
                    <a-form-item
                        :label="i18n('form.name','名称')">
                        <a-input v-model="tempNameJsonStr.name"
                                 @change="updateI18nName(tempNameJsonStr,'name')"
                                 :placeholder="i18n('form.name','请输入名称','input')"
                        >
                            <my-icon slot="addonAfter" type="iconearth-full"
                                     @click="editI18nName(tempNameJsonStr,'name')"/>
                        </a-input>
                    </a-form-item>
                    <a-form-item
                        :label="i18n('form.key','别名')">
                        <a-input :placeholder="i18n('form.key','别名')"
                                 v-decorator="['key', {rules: [
                                     {required: true, message: i18n('form.key','别名','input')},
                                     {pattern:/^[a-zA-Z][a-zA-Z0-9_-]*$/,message:i18n2('form.str','不能以数字开头,不能包含【_-】以外的特殊字符！','input')}
                                     ]}]"/>
                    </a-form-item>
                    <a-form-item
                        :label="i18n('form.priority','优先级')">
                        <a-input-number :min="0" :max="1000000" :placeholder="i18n('form.priority','优先级')"
                                        v-decorator="['priority', {rules: [{required: true, message: i18n('form.priority','优先级','input')}]}]"/>
                    </a-form-item>
                </a-form>
            </div>
        </rx-layout>
    </rx-dialog>
</template>
<script>
import InsPortalDefApi from '@/api/portal/core/insPortalDef'
import {BaseForm, RxDialog, RxCheckbox, Dialog,Util} from "@lowcode/jpaas-common-lib";
import ARadioGroup from "ant-design-vue/es/radio/Group";
import {mapState} from 'vuex'

export default {
    name: 'InsPortalDefEdit',
    mixins: [BaseForm],
    components: {
        ARadioGroup,
        RxDialog,
        'rx-checkbox': RxCheckbox
    },
    data() {
        return {
            i18nDefault: process.env.VUE_APP_LANGUAGE,
            i18nCurrent: "",
            isInitI18n: false,
            tempNameJsonStr: {
                i18nJson: "",
                name: ""
            },
            mdl:{
                isEdit:1
            },
            isMobileList: [
                {
                    value: "NO",
                    label: this.i18n('form.pcPortal',"电脑端门户"),
                    icon: 'iconcomputer'
                }, {
                    value: "YES",
                    label: this.i18n('form.mobilePortal',"移动端门户"),
                    icon: "iconmobilephone"
                }
            ]
        }
    },
    computed: {
        ...mapState({
            showType: (state) => state.appSetting.showType
        })
    },
    created() {
        this.getCurrentI18n();
        if (this.showType == 'newPage') {
            this['pkId'] = this.$attrs['pkId'];
        }

        this.loadData();
    },

    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "insPortalDef", key);
        },
        i18n2(name,text,key){
            return this.$ti18(name,text,"formBoEntity",key);
        },
        loadInitNameVal() {
            this.isInitI18n = true;
            if (!this.tempNameJsonStr.i18nJson) {
                this.isInitI18n = false;
                return;
            }
            let i18nJson = {};
            try {
                i18nJson = JSON.parse(this.tempNameJsonStr.i18nJson);
                this.tempNameJsonStr.name = i18nJson[this.i18nCurrent];
            } catch (e) {
                this.tempNameJsonStr.name = this.tempNameJsonStr.i18nJson;
                i18nJson[this.i18nCurrent] = this.tempNameJsonStr.i18nJson;
                this.tempNameJsonStr.i18nJson = JSON.stringify(i18nJson);
            }
            this.isInitI18n = false;
        },
        getCurrentI18n() {
            this.i18nCurrent = window.localStorage.getItem("language");
            if (!this.i18nCurrent) {
                this.i18nCurrent = this.i18nDefault;
            }

        },
        updateI18nName(record, text) {
            let i18nJson = this.getI18nJson(record, text);
            record[text] = i18nJson[this.i18nCurrent];
            record.i18nJson = JSON.stringify(i18nJson);
        },
        getI18nJson(row, text) {
            let i18nJson = {};
            let i18nConf = row.i18nJson;
            if (i18nConf) {
                i18nJson = JSON.parse(i18nConf);
                let val = i18nJson[this.i18nCurrent];
                if (!val || !this.isInitI18n) {
                    i18nJson[this.i18nCurrent] = row[text];
                }
            } else {
                i18nJson[this.i18nCurrent] = row[text];
                i18nJson[this.i18nDefault] = row[text];
            }
            return i18nJson;
        },
        editI18nName(record, text) {
            let self_ = this;
            let conifg = {
                curVm: this,
                widthHeight: ['800px', '600px'],
                data: {
                    i18nJson: this.getI18nJson(record, text)
                }
            }
            Dialog.openI18nDialog(conifg, function (action, data) {
                record[text] = data[self_.i18nCurrent];
                record.i18nJson = JSON.stringify(data);
            });
        },
        get(id) {
            return InsPortalDefApi.get(id);
        },
        onload_(data) {
            if (typeof (data) == 'undefined') {
                this.$set(this.mdl,'isMobile','NO')
                this.$set(this.mdl,'isDefault',0)
                this.form.setFieldsValue(this.mdl);
                return;
            }
            this.tempNameJsonStr.i18nJson = data.name;
            this.loadInitNameVal();
        },
        save(values,vm) {
            values = Object.assign(this.mdl,values)
            if(!values.isMobile){
                values['isMobile'] = this.mdl.isMobile
            }
            if(typeof values.isDefault === "undefined"){
                values.isDefault = 0;
            }
            let has = /^[a-zA-Z][a-zA-Z0-9_-]*$/.test(values.key)
            if(!has){
                this.$message.warning(this.i18n('list.nameMsg','标识中不能包含中文以及特殊字符~'));
                vm.loading = false;
                return;
            }
            values.name = this.tempNameJsonStr.i18nJson;
            return InsPortalDefApi.save(values);
        }

    }
}
</script>
<style scoped>
.InsPortal>>>.ant-form-item{
    margin-bottom: 16px!important;
}
.InsPortal-isDefault {
    display: flex;
    margin-top: 16px;
}

.InsPortal-isMobile {
    display: flex;
}

.InsPortal-isMobile-name {
    width: 120px;
    height: 50px;
    opacity: 1;
    border-radius: 4px;
    border: 1px solid rgba(232, 232, 232, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    position: relative;
    cursor: pointer;
}

.InsPortal-icon {
    margin-right: 7px;
    font-size: 20px;
}

.InsPortal-isMobile-hover {
    border: 1px solid rgba(66, 133, 244, 1);
    color: rgba(66, 133, 244, 1);
}

.InsPortal-isMobile-icon {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 12px;
    width: 12px;
    border: 12px solid;
    border-color: #1890ff #1890ff transparent transparent;
}

.InsPortal-icon-name {
    display: block;
    margin-top: -13px;
    color: #fff !important;
    font-weight: bold;
}
</style>